<template>
    <div style="padding-top: 1%">
        <Card :bordered="false" style="margin-left: 16%;margin-right: 1%" dis-hover>
            <p slot="title" style="font-size: larger;font-weight: bolder">博客管理 / 评论列表</p>
            <div>
                <!--条件查询表单-->
                <div>
                    <Form :model="queryVo" :label-width="80" inline>
                        <FormItem label="评论内容:">
                            <Input v-model="queryVo.comContent" placeholder="请输入评论内容（模糊查询）"/>
                        </FormItem>
                        <FormItem label="用户昵称:">
                            <Input v-model="queryVo.nickName" placeholder="请输入用户昵称（模糊查询）"/>
                        </FormItem>
                        <Button style="margin-left: 1%" icon="ios-search" type="info" @click="getComment">查询</Button>
                        <Button style="margin-left: 1%" @click="clear">重置</Button>
                    </Form>
                </div>
                <Alert style="margin-top: 1%" show-icon>评论列表</Alert>
                <!--评论表阿哥-->
                <div>
                    <Table :columns="commentColumns" :data="comments">
                        <template slot-scope="{ row }" slot="userInfo">
                            <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-large">
                                <img style="width: 40px;height: 40px" :src="row.blogUser.uheadpicture">
                            </span>
                            <span style="margin-left: 10px"
                                  class="i-layout-header-user-name">{{row.blogUser.unickname}}</span>
                        </template>
                        <template slot-scope="{ row }" slot="targetUser">
                            <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-large">
                                <img v-show="row.targetUser!==null" style="width: 40px;height: 40px"
                                     :src="row.targetUser!==null?row.targetUser.uheadpicture:null">
                            </span>
                            <span style="margin-left: 10px"
                                  class="i-layout-header-user-name">{{row.targetUser!==null?row.targetUser.unickname:'无'}}</span>
                        </template>
                        <template slot-scope="{ row }" slot="action">
                            <Button type="error" size="small" @click="deleteComment(row.comId)" icon="md-trash">删除
                            </Button>
                        </template>
                    </Table>
                </div>
                <!--分页-->
                <div>
                    <Page style="height: 30px;margin-top: 1%" :total="total" :page-size="queryVo.pageSize" show-total
                          show-elevator
                          @on-change="changePage"/>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        comments: [],
        queryVo: {
          pageNum: 1,
          pageSize: 7,
          comContent: '',
          nickName: ''
        },
        total: 0,
        // 评论表格规则映射
        commentColumns: [
          {
            type: 'index',
            align: 'center'
          },
          {
            title: '评论内容',
            align: 'center',
            key: 'comContent'
          },
          {
            title: '评论时间',
            align: 'center',
            key: 'comComtime'
          },
          {
            title: '点赞数',
            align: 'center',
            key: 'comLikecount'
          },
          {
            title: '目标用户',
            slot: 'targetUser'
          },
          {
            title: '用户昵称',
            slot: 'userInfo'
          },
          {
            title: '操作',
            align: 'center',
            slot: 'action'
          }
        ]
      }
    },
    mounted() {
      this.getComment()
    },
    methods: {
      getComment() {
        var params = new URLSearchParams(this.queryVo)
        this.$http.get('comment', { params: params }).then(res => {
          res = res.data
          this.comments = res.data
          this.total = res.count
        })
      },
      // 页码改变的回调
      changePage(pagenum) {
        this.queryVo.pageNum = pagenum
        this.getComment()
      },
      // 清空表单
      clear() {
        this.queryVo.comContent = ''
        this.queryVo.nickName = ''
      },
      // 删除评论
      deleteComment(id) {
        this.$Modal.confirm({
          title: '删除',
          content: '您确定要删除该评论及其子评论吗？',
          onOk: () => {
            this.$http.delete(`comment?id=${id}`).then(res => {
              res = res.data
              if (res.code === 5120) {
                this.$Message.success(res.msg)
                this.getComment()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
